<template>
  <div class="padding30px">
    <a-card>
      <!-- 搜索区域 -->
      <!-- <a-form :model="searchForm" layout="inline" @submit.prevent="handleSearch">



        <a-form-item>
          <a-button type="primary" htmlType="submit">搜索</a-button>
        </a-form-item>

        <a-form-item>
          <a-button @click="resetSearch">重置</a-button>
        </a-form-item>
      </a-form> -->

    </a-card>
    <a-card title="代码生成">
      <!-- 操作按钮 -->
      <!-- <a-button type="primary" @click="openAddModal" style="margin-bottom: 16px">新增</a-button> -->
      <!-- 表格 -->
      <a-table :dataSource="dataSourceT" :columns="columns" :pagination="pagination" rowKey="$list[0].fieldName"
        bordered @change="handleTableChange">
        <!-- 自定义列渲染 -->
        <template #bodyCell="{ column, record }">
          <!-- 操作列 -->
          <template v-if="column.dataIndex === 'edit'">
            <a-button @click="openCreateCode(record)">生成前端代码</a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增/编辑模态框 -->
    <a-modal title="生成前端代码" :open="createCodeOpen" @ok="codeHandleSubmit" @cancel="codeHandleCancel">
      <a-form :model="formCrate" layout="vertical">
        <a-form-item>
          <a-input v-model:value="formCrate.moduleName" placeholder="请输入模块名"></a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="formCrate.requestUrl" placeholder="请输入后端请求地址"></a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="formCrate.path" placeholder="请输入前端项目路径"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'


import {
  listApi, vueCodeApi
} from '#/api/object/table'


// 通用 CRUD 钩子
import { crud } from '#/components/crud'

// 图片上传组件（此处暂时未用到，保留未来扩展可能）
// import ImageUpload from '#/components/ImageUpload.vue'

// 初始化搜索表单
const initSearchForm = {
  roleName: '',
}

const pagination = {
  current: 1,
  pageSize: 10,
  total: 0,
}

// 使用 useCrud 管理数据和操作
const {
  dataSource: dataSourceT,
  searchForm,
  selectedRowKeys: rowSelectionSelecRow,
  modalVisible,
  isEditMode,
  formData: currentFormData,
  loadData,
  handleTableChange,
  handleSearch,
  resetSearch,
  deleteSelected: deleteSelect,
  openAddModal,
  openEditModal,
  handleSubmit,
  handleCancel,
} = crud({
  getList: listApi,
}, initSearchForm)

// 表单验证规则
const formRules = {

}

// 表格列配置
const columns = [
  { title: '表名', dataIndex: 'tableName', key: 'tableName', align: 'center' },
  { title: '表注释', dataIndex: 'comment', key: 'comment', align: 'center' },
  { title: '操作', dataIndex: 'edit', key: 'edit', align: 'center' },
]
//页面挂载时加载数据
onMounted(() => {
  loadData()
})


//生成前端代码
const formCrate = ref({
  path: "D:\\shopCode\\vue-vben-admin"
})
const createItem = ref({})
const createCodeOpen = ref(false)
const openCreateCode = (item) => {
  console.log("item", item)
  createItem.value = item
  createCodeOpen.value = true
}

const codeHandleSubmit = async () => {
  formCrate.value.tableName = createItem.value.tableName
  await vueCodeApi(formCrate.value)
  codeHandleCancel()
}
const codeHandleCancel = () => {
  createCodeOpen.value = true
  formCrate.value = {
    path: "D:\\shopCode\\vue-vben-admin"
  }
}
</script>
